<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">{{isEdit ? '编辑提醒' : '添加提醒'}}</view>
            <view class="right">
                <text class="save-btn" @click="saveReminder">保存</text>
            </view>
        </view>
        
        <!-- 表单内容 -->
        <view class="form">
            <view class="form-item">
                <view class="label">提醒类型</view>
                <view class="type-list">
                    <view 
                        class="type-item" 
                        v-for="(item, index) in typeList" 
                        :key="index"
                        :class="{ active: formData.type === item.value }"
                        @click="formData.type = item.value"
                    >
                        <view class="icon" :style="{ backgroundColor: item.color }">
                            <u-icon :name="item.icon" size="32" color="#fff"></u-icon>
                        </view>
                        <text>{{item.name}}</text>
                    </view>
                </view>
            </view>
            
            <view class="form-item">
                <view class="label">提醒标题</view>
                <input 
                    type="text" 
                    v-model="formData.title" 
                    placeholder="请输入提醒标题"
                    maxlength="20"
                />
                <view class="count">{{formData.title.length}}/20</view>
            </view>
            
            <view class="form-item">
                <view class="label">提醒描述</view>
                <textarea 
                    v-model="formData.desc" 
                    placeholder="请输入提醒描述"
                    maxlength="100"
                ></textarea>
                <view class="count">{{formData.desc.length}}/100</view>
            </view>
            
            <view class="form-item">
                <view class="label">提醒时间</view>
                <view class="picker-item" @click="showTimePicker = true">
                    <text>{{formData.time || '请选择时间'}}</text>
                    <u-icon name="arrow-right" size="32" color="#999"></u-icon>
                </view>
            </view>
            
            <view class="form-item">
                <view class="label">重复</view>
                <view class="picker-item" @click="showRepeatPicker = true">
                    <text>{{getRepeatText()}}</text>
                    <u-icon name="arrow-right" size="32" color="#999"></u-icon>
                </view>
            </view>
            
            <view class="form-item switch-item">
                <view class="label">开启提醒</view>
                <switch 
                    color="#1890FF" 
                    :checked="formData.enabled" 
                    @change="formData.enabled = $event.detail.value"
                />
            </view>
        </view>
        
        <!-- 时间选择器 -->
        <u-popup 
            v-model="showTimePicker" 
            mode="bottom"
            border-radius="20"
            :close-on-click-overlay="true"
        >
            <view class="picker-header">
                <text class="cancel" @click="showTimePicker = false">取消</text>
                <text class="title">选择时间</text>
                <text class="confirm" @click="confirmTime">确定</text>
            </view>
            <picker-view 
                class="time-picker" 
                :value="timePickerValue" 
                @change="timePickerChange"
            >
                <picker-view-column>
                    <view class="picker-item" v-for="(item, index) in hours" :key="index">{{item}}</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="picker-item" v-for="(item, index) in minutes" :key="index">{{item}}</view>
                </picker-view-column>
            </picker-view>
        </u-popup>
        
        <!-- 重复选择器 -->
        <u-popup 
            v-model="showRepeatPicker" 
            mode="bottom"
            border-radius="20"
            :close-on-click-overlay="true"
        >
            <view class="picker-header">
                <text class="cancel" @click="showRepeatPicker = false">取消</text>
                <text class="title">重复</text>
                <text class="confirm" @click="confirmRepeat">确定</text>
            </view>
            <radio-group @change="repeatChange">
                <label class="repeat-item" v-for="(item, index) in repeatOptions" :key="index">
                    <view class="label">{{item.label}}</view>
                    <radio :value="item.value" :checked="formData.repeat === item.value" color="#1890FF" />
                </label>
            </radio-group>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isEdit: false,
            formData: {
                id: 0,
                title: '',
                desc: '',
                time: '',
                type: 'medication',
                repeat: 'daily',
                enabled: true
            },
            typeList: [
                {
                    name: '用药',
                    value: 'medication',
                    icon: 'medicine',
                    color: '#1890FF'
                },
                {
                    name: '血压',
                    value: 'blood-pressure',
                    icon: 'heart',
                    color: '#FF4D4F'
                },
                {
                    name: '体重',
                    value: 'weight',
                    icon: 'scale',
                    color: '#52C41A'
                },
                {
                    name: '运动',
                    value: 'sport',
                    icon: 'sport',
                    color: '#722ED1'
                }
            ],
            showTimePicker: false,
            timePickerValue: [8, 0],
            hours: Array.from({length: 24}, (_, i) => i < 10 ? `0${i}` : `${i}`),
            minutes: Array.from({length: 60}, (_, i) => i < 10 ? `0${i}` : `${i}`),
            showRepeatPicker: false,
            repeatOptions: [
                { label: '每天', value: 'daily' },
                { label: '工作日', value: 'weekdays' },
                { label: '周末', value: 'weekends' },
                { label: '每周一', value: 'monday' },
                { label: '每周二', value: 'tuesday' },
                { label: '每周三', value: 'wednesday' },
                { label: '每周四', value: 'thursday' },
                { label: '每周五', value: 'friday' },
                { label: '每周六', value: 'saturday' },
                { label: '每周日', value: 'sunday' }
            ]
        }
    },
    onLoad(options) {
        if (options.id) {
            this.isEdit = true
            // 这里应该从服务器或本地存储获取提醒详情
            // 模拟获取数据
            this.loadReminderData(options.id)
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        loadReminderData(id) {
            // 模拟从服务器获取数据
            const reminderData = {
                id: parseInt(id),
                title: '服药提醒',
                desc: '请按时服用降压药',
                time: '08:00',
                type: 'medication',
                repeat: 'daily',
                enabled: true
            }
            
            this.formData = reminderData
            
            // 设置时间选择器的初始值
            if (this.formData.time) {
                const [hour, minute] = this.formData.time.split(':').map(Number)
                this.timePickerValue = [hour, minute]
            }
        },
        timePickerChange(e) {
            this.timePickerValue = e.detail.value
        },
        confirmTime() {
            const hour = this.hours[this.timePickerValue[0]]
            const minute = this.minutes[this.timePickerValue[1]]
            this.formData.time = `${hour}:${minute}`
            this.showTimePicker = false
        },
        repeatChange(e) {
            this.formData.repeat = e.detail.value
        },
        confirmRepeat() {
            this.showRepeatPicker = false
        },
        getRepeatText() {
            const repeatOption = this.repeatOptions.find(option => option.value === this.formData.repeat)
            return repeatOption ? repeatOption.label : '每天'
        },
        saveReminder() {
            // 表单验证
            if (!this.formData.title.trim()) {
                uni.showToast({
                    title: '请输入提醒标题',
                    icon: 'none'
                })
                return
            }
            
            if (!this.formData.time) {
                uni.showToast({
                    title: '请选择提醒时间',
                    icon: 'none'
                })
                return
            }
            
            // 显示加载提示
            uni.showLoading({
                title: '保存中...'
            })
            
            // 模拟保存到服务器
            setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                    title: '保存成功',
                    icon: 'success'
                })
                
                // 返回上一页
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)
            }, 1000)
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
        
        .save-btn {
            font-size: 32rpx;
            color: #1890FF;
        }
    }
    
    .form {
        margin-top: 20rpx;
        background-color: #fff;
        padding: 0 30rpx;
        
        .form-item {
            position: relative;
            padding: 30rpx 0;
            border-bottom: 2rpx solid #F7F7FA;
            
            &:last-child {
                border-bottom: none;
            }
            
            .label {
                font-size: 32rpx;
                color: #333;
                margin-bottom: 20rpx;
            }
            
            input, textarea {
                width: 100%;
                font-size: 28rpx;
                color: #333;
            }
            
            textarea {
                height: 150rpx;
                line-height: 1.6;
            }
            
            .count {
                position: absolute;
                right: 0;
                bottom: 30rpx;
                font-size: 24rpx;
                color: #999;
            }
            
            .picker-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                text {
                    font-size: 28rpx;
                    color: #333;
                }
            }
            
            &.switch-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .label {
                    margin-bottom: 0;
                }
            }
        }
        
        .type-list {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10rpx;
            
            .type-item {
                width: 25%;
                padding: 0 10rpx;
                margin-bottom: 20rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                
                &.active {
                    .icon {
                        transform: scale(1.1);
                    }
                    
                    text {
                        color: #1890FF;
                    }
                }
                
                .icon {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 20rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 10rpx;
                    transition: transform 0.3s;
                }
                
                text {
                    font-size: 24rpx;
                    color: #666;
                }
            }
        }
    }
    
    .picker-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        padding: 0 30rpx;
        border-bottom: 2rpx solid #F7F7FA;
        
        .title {
            font-size: 32rpx;
            color: #333;
        }
        
        .cancel {
            font-size: 28rpx;
            color: #999;
        }
        
        .confirm {
            font-size: 28rpx;
            color: #1890FF;
        }
    }
    
    .time-picker {
        height: 400rpx;
        
        .picker-item {
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            font-size: 28rpx;
            color: #333;
        }
    }
    
    .repeat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;
        padding: 0 30rpx;
        border-bottom: 2rpx solid #F7F7FA;
        
        &:last-child {
            border-bottom: none;
        }
        
        .label {
            font-size: 28rpx;
            color: #333;
        }
    }
}
</style> 